<template>
  <div>
    <el-button type="primary" @click="returnParent">返回上一级</el-button>
    <div style="width:1920px;height:1080px" ref="chartsDOM"></div>
  </div>

</template>

<script>
import * as echarts from "echarts";
import axios from 'axios';
import router from "@/router";


export default {
  name: 'ChinaMap',
  mounted() {
    this.init('100000', 'china');
  },
  data() {
    return {
      mapChart: null,
      adcode: 100000
    }
  },
  methods: {
    init(adcode, mapName) {
      const _this = this;
      console.log('init:\t' + adcode);
      this.adcode = adcode;
      let mapJsonData;

      if (this.mapChart) this.mapChart.dispose();
      // 初始化统计图对象
      this.mapChart = echarts.init(this.$refs["chartsDOM"]);
      // 显示 loading 动画
      this.mapChart.showLoading();
      // 获取数据并进行地图绘制
      axios.get('https://geo.datav.aliyun.com/areas_v3/bound/' + adcode + '_full.json').then(res => {
        mapJsonData = res.data;
        // 关闭动画
        _this.mapChart.hideLoading();
        // 注册地图数据
        echarts.registerMap(mapName, mapJsonData);
        // echarts.registerMap(mapName, JSON.parse(JSON.stringify(mapJsonData)));
        let option = {
          series: [
            {
              name: '中国地图',
              type: 'map',
              map: mapName,// 此处map的内容与echarts.registerMap中自定义的名字一直
              label: {
                show: true
              }
            }
          ]
        };
        _this.mapChart.setOption(option, this.mapChart.on("click", function clickMap(params) {

          // console.log(params.name)
          // console.log(JSON.stringify(mapJsonData.features))
          let features = mapJsonData.features;
          const adcode = features.filter((item) => {
            return item.properties.name === params.name;
          })[0].properties.adcode;
          console.log(adcode);
          if ((adcode + '').endsWith("00")) {
            router.push({});
            _this.init(adcode, adcode + '');
          }
        }));
      })


    },
    returnParent() {
      console.log(this.adcode)
      const _this = this;
      if ((this.adcode + '').endsWith("0000")) {
        router.push({});
        const adcodeTemp = 100000;
        const mapNameTemp = adcodeTemp + '' + new Date().getTime();
        console.log(adcodeTemp);
        console.log(mapNameTemp);
        router.push({});
        _this.init(adcodeTemp, mapNameTemp);
      } else {
        const adcodeTemp = (this.adcode + '').substr(0, 2) + '0000';
        const mapNameTemp = adcodeTemp + '' + new Date().getTime();
        console.log(adcodeTemp);
        console.log(mapNameTemp);
        router.push({});
        _this.init(adcodeTemp, mapNameTemp);
      }
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
